<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::common"></div>
    <style>
        .center {
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 3px;
        }
        .pagination {
            display: inline-block;
            padding-left: 0px;
            margin: 0px 0px;
            border-radius: 4px;
        }
        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 10px;
            margin-top: 3px;
        }
    </style>
</head>
<body class="center">
<a class="btn btn-sm btn-primary" href="/record/selectByLoginCustom">返回</a>
<table class="table table-striped table-bordered table-hover table-condensed">
    <tr class="success">
        <td>ID</td>
        <td>服务名称</td>
        <td>金额</td>
        <td>详情</td>
        <td>图片</td>
        <td>创建时间</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    <tr th:each="service:${list}">

        <td th:text="${service.id}"></td>
        <td th:text="${service.name}"></td>
        <td th:text="${service.money}"></td>

        <td>
            <a class="btn btn-xs btn-success" th:onclick="showServiceContent([[${service.content}]])">详情</a >
        </td>

        <td><img width="40px" height="20px" th:src="|/pic/${service.image}|"></td>
        <td th:text="${#dates.format(service.createTime, 'yyyy-MM-dd hh:mm')}"></td>
        <td>
            <!-- recordvos为当前登录用户的消费记录表 -->
            <span th:each="recordvo:${recordvos}">
                <span class="label label-warning" th:if="${recordvo.serviceId==service.id}">已选择</span>
            </span>
        </td>
        <td>
            <button class="btn btn-xs btn-primary" th:id="'selectBtn_' + ${service.id}" th:text="'选择'"
                    th:attr="data-service-id=${service.id}"></button>
        </td>
    </tr>
</table>
</body>
<script>

    function showServiceContent(content) {
        layer.open({
            type: 1,
            area: ['1000px', '450px'],
            content: content
        })
    }

    $(document).ready(function () {
        $('button[id^="selectBtn_"]').click(function () {
            var serviceId = $(this).data('service-id');
            checkIfChosen(serviceId, this);
        });

        function checkIfChosen(serviceId, button) {
            $.ajax({
                url: '/record/selectIfChoose', // 假设这是你的后端接口URL
                type: 'GET',
                data: {id: serviceId},
                success: function (response) {
                    if (response === 1) {
                        //$(button).hide(); // 如果已选择，隐藏按钮
                        alert('该服务已被您选择！');
                    }
                    else if (response === 3) {
                        alert('很抱歉, 您的余额不足！');
                    }
                    else {

                        // 这里可以添加选择课程的逻辑，比如再次确认或直接发送请求
                        layer.confirm('您确认要选择此服务嘛?', function () {
                            location.href = '/service/toSelectService?id=' + serviceId;
                        });
                    }
                },
                error: function () {
                    alert('请求失败，请稍后再试！');
                }
            });
        }
    });

</script>
</html>